<template>
  <el-dialog
    @close="close"
    title="添加&修改友情链接"
    :visible.sync="dialog"
    width="30%"
  >
    <el-form size="mini" :model="formInline" :rules="rules" ref="formInline" label-width="100px">
      <el-form-item label="链接方名称：" prop="title" >
        <el-input v-model="formInline.name"></el-input>
      </el-form-item>
      <el-form-item label="地址：" prop="title" >
        <el-input v-model="formInline.link"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button :disabled="btnLoading" @click="dialog = false">取 消</el-button>
      <el-button type="primary" :loading="btnLoading" @click="onSubmit">确 定</el-button>
    </span>
  </el-dialog>

</template>
<script>
  import { addLinkAPI , updateLinkAPI , getDetailLinkAPI} from '@/api/link'
  // import { getRouterTreeAPI } from '@/api/system/menu'

  export default {
    name: 'LinksListEdit',
    props: {
      dialog_: {
        type: Boolean,
        default: false
      },
      id: {
        type: Number,
        default: null
      }
    },
    data() {
      var validateSort = (rule, value, callback) => {``
        var reg = /^[0-9]\d*$/
        if (value === null || value === '' | value === undefined) {
          callback()
        } else if (!reg.test(value)) {
          return callback(new Error('请输入正确的数字'))
        } else {
          callback()
        }
      }
      return {
        props: {
          label: 'title',
          children: 'children'
        },
        value: '',
        dialog: false,
        formInline: {
          id: this.id,
          name: '',
          photo:'',
          link:'',
          type:''
        },
        btnLoading: false,
        treeData: [],
        rules: {
          name: [
            { required: true, message: '请填写角色名称', trigger: 'blur' }
          ],
          remark: [
            { required: true, message: '请填写角色描述', trigger: 'blur' }
          ],
          sort: [
            { validator: validateSort, trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      // 根据角色ID查询角色详情
      getLinkDetails() {
        getDetailLinkAPI({ id: this.id }).then(res => {
            if (res.code === 0) {
              this.formInline = res.data
            } else {
              this.$message.error("查询失败")
            }
          })
      },
      // 递归勾选的方法
      defaultCheacked(list) {
        //   for(const item of list) {
        //     if (item.checked) {
        //       // 防止视图未更新的情况
        //       this.$nextTick(() => {
        //         this.$refs.treeData.setChecked(item.id, true, false)
        //       })
        //     }
        //     if (item.children && item.children.length > 0) {
        //       this.defaultCheacked(item.children)
        //     }
        //   }
      },
      close() {
        this.$emit('close')
      },
      // 提交
      onSubmit() {
        this.$refs.formInline.validate((valid) => {
          if (valid) {
            if(this.id){
              this.btnLoading = true
              updateLinkAPI(this.formInline).then(res => { // 编辑
                this.btnLoading = false
                if (res.code === 0) {
                  this.$message.success('操作成功')
                  this.$emit('success')
                  this.dialog = false
                } else {
                  this.$message.error(res.message)
                }
              })
            }else{
              this.btnLoading = true
              addLinkAPI(this.formInline).then(res => { // 增加
                this.btnLoading = false
                if (res.code === 0) {
                  this.$message.success('操作成功')
                  this.$emit('success')
                  this.dialog = false
                } else {
                  this.$message.error(res.message)
                }
              })
            }
          } else {
            this.$message.warning("请填写完整的信息")
            return false;
          }
        });

      },
    },
    mounted() {
      this.dialog = this.dialog_
      if (this.id) {
        this.getLinkDetails() // 编辑查询详情
      } else {
        //this.getRouterAll() //新增查询菜单树信息
      }
    }
  }
</script>
